<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <script src="jQuery/jquery-3.1.1.js"></script>
    <title></title>
    <style>
        main {
            width: 900px;
            border: 1px solid #999;
            margin: 0 auto;
        }
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
            display: inline-block;
        }
        li {
            padding: 5px;
            position: relative;
            cursor: pointer;
        }
        .q5>li:hover {
            background-color: orangered;
            color: white;
        }
        section {
            margin: 5px;
            border-bottom: 1px dotted #757;
            padding: 10px;
        }
        li>div {
            width: 8px;
            height: 8px;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 8px;
            text-align: center;
            line-height: 8px;
        }
        .yxz li {
            border: 1px solid brown;
        } 
        .no {
            display: none;
        }
        .qcsy {
            display: inline-block;
            float: right;
            /*border: 2px solid steelblue;*/
            padding: 2px;
            /*position: relative;
            bottom: 2px;*/
            border-radius: 5px;
            display: none;
        }
        .qcsy:hover {
            background-color: chocolate;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <span>品牌：</span>
            <ul class="q5">
                <li>三星</li>
                <li>苹果</li>
                <li>小米</li>
                <li>华为</li>
                <li>中兴</li>
                <li>酷派</li>
                <li>朵唯</li>
            </ul>
        </section>
        <section>
            <span>价位：</span>
            <ul class="jw q5">
                <li>1000-1500</li>
                <li>1500-2000</li>
                <li>2000-3000</li>
                <li>3000-3500</li>
                <li>3500-4000</li>
                <li>4000-5000</li>
                <li>5000-6000</li>
                <li>6000+</li>
            </ul>
        </section>
        <section>
            <span>网络制式：</span>
            <ul class="wlzs q5">
                <li>3G</li>
                <li>4G</li>
                <li>4G+</li>
                <li>联通4G+</li>
                <li>移动4G+</li>
                <li>三网通</li>
                <li>全网通</li>
            </ul>
        </section>
        <section>
            <span>屏幕尺寸：</span>
            <ul class="cc q5">
                <li>4.0-5.0</li>
                <li>5.0-5.5</li>
                <li>4.5-5.0</li>
                <li>6.0MAX</li>
            </ul>
        </section>
        <section>
            <span>主要功能：</span>
            <ul class="gn q5">
                <li>后置双摄</li>
                <li>唯美自拍</li>
                <li>高强芯片</li>
                <li>速冲</li>
                <li>2k屏幕</li>
                <li>曲面机身</li>
            </ul>
        </section>
        <section>
            <span>已选择：</span>
            <ul class="yxz">
                <li class="no">
                </li>
                <li class="no">
                </li>
                <li class="no">
                </li>
                <li class="no">
                </li>
                <li class="no">
                </li>
                <li class="no">
                </li>
            </ul>
            <span class="qcsy">清除筛选条件</span>
        </section>
    </main>
</body>
</html>
<script>
    $(function () {
        $('.q5').each(function (index) {
            $(this).find('li').click(function () {   
                $('.qcsy').show();
                // 点击变色
                $(this).css({ 'background-color': 'red', 'color': 'white' })
                    .siblings().css({ 'background-color': 'white', 'color': 'black' })
                // 传递选中的值
                $('.yxz>li').eq(index).html($(this).html() + '<div class="div">&times;</div>').removeClass('no').show()
                //  点击div取消背景色和隐藏标签
                $('.yxz>li').eq(index).click(function () {
                    $('.yxz>li').eq(index).css('display', 'none').html('')
                    $('.q5').eq(index).find('li').css({ 'background-color': 'white', 'color': 'black' })
                     var zz = $('.yxz>li').not(':empty').length
                     console.log(zz)
                    if(zz==1){
                        $('.qcsy').hide();
                    }
                })
                $('.qcsy').click(function () {
                    $('.q5>li').css({ 'background-color': 'white', 'color': 'black' })
                    $('.yxz>li').html('')
                    $('.qcsy').html('');
                })
            })
        })
    })
</script>